<template>
	<view class="box" v-if="isShow">
		<view class="box-main">
			<view class="box-main-icon">
				<image src="@/static/linlin.png" mode="aspectFill"></image>
			</view>
			<view class="box-main-close" @click="$emit('close')">
			   <image src="@/static/close1.png" mode="aspectFill"></image>
			</view>
			
			<view class="box-main-title">
				<view class="box-main-title-line" style="margin-right: 20rpx;">
				</view>
				温馨提示
				<view class="box-main-title-line" style="margin-left: 20rpx;"></view>
			</view>
		    <view style="margin: 20rpx 0;" v-for="(item, index) of dataArr" :key="index">
				<view class="box-main-item">
					<view class="box-main-text">
						店名: {{ item.device_name }}
					</view>
					<view class="box-main-text">
						负责人: {{ item.head_name }}
					</view>
					<view class="box-main-text">
						电话: {{ item.phone }} 
					</view>
					<view class="box-main-text">
						设备编号: {{ item.device_id}} 
					</view>
				</view>
			</view>
			<view class="box-main-text" style="margin-bottom: 10rpx;">
				今日设备开机次数不达标
			</view>
			<view class="box-main-footer" @click="$emit('confirm')" style="margin-bottom: 40rpx;">
				点击查看
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props: {
		  isShow: {
		    type: Boolean,
			default: false
		  },
		  dataArr: {
		    type: Array,
			default: []
		  }
		},
        data(){
			return {}
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.box {
	 position: fixed;
	 width: 100%;
	 height: 100vh;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 background-color: rgba(0, 0, 0, 0.5);
	 z-index: 999;
	 &-main {
	   position: relative;
	   width: 672rpx;
	   border-radius: 10rpx;
	   background: #fff;
	   &-footer {
		width: 208rpx;
		height: 46rpx;
		background: rgb(247, 181, 44);
		color: #fff;
		text-align: center;
		margin: 0 auto;
		line-height: 46rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		font-weight: 500;
	   }
	   &-text {
		   font-size: 26rpx;
		   font-weight: 500;
		   color: #989898;
		   text-align: center;
		   line-height: 1.5;
	   }
	   &-title {
		display: flex;
        align-items: center;
		justify-content: center;
		font-weight: 500;
		font-size: 36rpx;
		color: #252525;
		margin-top: 80rpx;
		&-line {
			width: 90rpx;
			height: 2rpx;
			background: #252525;
		}
	   }
	   &-icon {
		position: absolute;
		top: -140rpx;
		left: 50%;
		transform: translateX(-50%);
		image {
		  width: 182rpx;
		  height: 230rpx;
		  background-size: 100%;
		}
	   }
	   &-close {
		position: absolute;
		top: -60rpx;
		right: 0;
		image {
		  width: 40rpx;
		  height: 40rpx;
		  background-size: 100%;
		}
	   }
	 }
	}
</style>